<template>
  <div class="common-layout">
    <el-container>

      <el-header>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            router="true">
          <div class="menu-left">
            <el-menu-item index="/tianyanCommunity">天眼社区</el-menu-item>
            <el-menu-item index="/tianyanUpload">天眼寻人</el-menu-item>
          </div>
          <div class="menu-right" v-if="role===null">
            <el-menu-item>
              <el-link href="/login">登录</el-link>
            </el-menu-item>
            <span>|</span>
            <el-menu-item>
              <el-link href="/register">注册</el-link>
            </el-menu-item>
          </div>
          <div class="menu-right" v-else>
            <el-avatar></el-avatar>
            <el-dropdown>
    <span class="el-dropdown-link">
      <el-icon class="el-icon--right">
        <arrow-down/>
      </el-icon>
    </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="personalCenter">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="handelLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

        </el-menu>

      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive} from 'vue'
import router from '@/router'
import {ElMessage} from "element-plus";
import {logout} from "@/utils/api"

const activeIndex = ref('/tianyanCommunity')
const role = ref('')
role.value = localStorage.getItem('role')
console.log("role.value=" + role.value)

/**
 * 根据用户角色跳转不同的个人中心页面
 */
function personalCenter() {
  let routeName = ''
  switch (role.value) {
    case 'ADMIN':
      routeName = '/ADMIN';
      break;
    case 'ORDINARY-USER':
      routeName = '/ORDINARY-USER';
      break;
    default:
      routeName = '/';
      ElMessage("无权限访问当前页面")
      break;
  }
  router.push({path: routeName})
}

/**
 * 退出登录
 */
const handelLogout = () => {
  logout();
}

</script>

<style scoped>
.el-menu-demo {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 可选，用于垂直居中菜单项 */
}

.menu-left, .menu-right {
  display: flex;
  align-items: center; /* 用于垂直居中 */
}

/**
利用伪类元素给选中菜单添加下划线
 */
.menu-left .el-menu-item.is-active {
  position: relative; /* 为了定位伪元素 */
}

.menu-left .el-menu-item.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; /* 或者使用具体的宽度值 */
  height: 2px; /* 下划线的厚度 */
  background-color: #409EFF; /* 下划线的颜色，可以根据需要调整 */
}

a {
  font-size: 14px;
}

span {
  margin: 0 8px;
}

</style>